<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>倒计时Demo</title>
	<style type= "text/css">  
		.daojishi h2  
		{   
			font-family:Helvetica, Microsoft YaHei, Arial, sans-serif;   
			font-size:14px;  
			margin-bottom:5px;   
			color:#151515;  
		}  
		.daojishi #timer  
		{  
			font-family:Helvetica, Microsoft YaHei, Arial, sans-serif;   
			font-size:14px;  
			color:#151515;  
			font-weight:bold;  
		}  
	</style> 
    <script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
    <script type="text/javascript">
        $(function(){
			var time = 10 * 1000; //毫秒
			var Interval = window.setInterval(function(){
				if(time >= 0){
					var hh = parseInt(time / 1000 / 60 / 60 % 24, 10);
					var mm = parseInt(time / 1000 / 60 % 60, 10);
					var ss = parseInt(time / 1000 % 60, 10);
					$("#timer").html(hh + ":" + (mm < 10 ? "0" + mm : mm) + ":" + (ss < 10 ? "0" + ss : ss));
					time = time - 1000;
				} else {
					//取消定时
					window.clearInterval(Interval);
					alert("到时间啦！");
				}				
			},1000);
        });
    </script>
</head>
<body>
	<div class = "daojishi">  
		<h2>剩余时间为：</h2>  
		<div id = "timer">  
		</div>  
	</div> 
</body>
</html>